<template>
    <div>
        <view class="list">
            <u-radio-group
                v-model="active"
                placement="column"
                @change="groupChange"
            >
                <view class="item" v-for="item of AddressList" :key="item.id">
                    <view class="header">
                        <view class="address-name">收货人：{{item.consignee}}</view>
                        <view class="address-name">{{item.mobile}}</view>
                    </view>
                    <view class="city">所在地区：{{item.provinces.name}}-{{item.citys.name}}-{{item.districts.name}}</view>
                    <view class="address">详细地址：{{item.address}}</view>
                    <view class="btn-box">
                        <view class="left-btn">
                            <!-- <label> -->
                            <!-- <radio value="{{item.status}}" bindchange='radiochange' checked="{{item.status == 1 ? true : false}}" data-id="{{item.id}}">设置默认地址</radio> -->
                            <!-- </label> -->
                            <u-radio
                                :customStyle="{marginBottom: '8px'}"
                                label="设置默认地址"
                                :name="item.id"
                            >
                            </u-radio>
                        </view>
                        <view class="right-btn">
                            <view class="edit" @click="onEdit(item.id)">
                                <span>
                                    <image src="/static/images/icons/edit.png"></image>
                                </span>
                                <span>编辑</span>
                            </view>
                            <view class="del" @click="onDel(item.id)">
                                <span>
                                    <image src="/static/images/icons/del.png"></image>
                                </span>
                                <span>删除</span>
                            </view>
                        </view>
                    </view>
                </view>
                
            </u-radio-group>
        </view>

        <!-- 底部添加地址 -->
        <u-button type="primary" @click="add" :custom-style="addressBtn" text="添加地址"></u-button>
        

        <!-- 信息提示 -->
        <u-notify ref="uNotify"></u-notify>
    </div>
</template>
<script>
export default {
    onShow()
    {
        this.$u.auth.check()
        // 获取本地存储的信息
        let LoginUser = uni.getStorageSync('LoginUser')

        this.LoginUser = LoginUser

        this.AddressIndex()
    },
    data() {
        return {
            active:24,
            LoginUser:null,
            AddressList:[],
            addressBtn:{
                position: 'fixed',
                left: '0',
                bottom: '0',
                width: '100%',
                backgroundColor: '#4ea9f5',
                borderRadius: '0px',
                color: '#fff',
            }
        }
    },
    methods: {
        async AddressIndex()
        {
            let data = {
                userid:this.LoginUser.id
            }
            let result = await this.$u.api.user.Index(data)

            if(result.data.length < 0)
            {
                this.$refs.uNotify.show({
                    type:'error',
                    message:'暂无收货地址',
                    duration:1500
                })
                return false
            }

            for(let item of result.data)
            {
                if(item.status == 1)
                {
                    this.active = item.id
                }
            }

            this.AddressList = result.data
        },
        async groupChange(item)
        {
            let data = {
                userid:this.LoginUser.id,
                id:item
            }

            let result = await this.$u.api.user.selected(data)

            if(result.code === 0)
            {
                this.$refs.uNotify.show({
                    type:'error',
                    message:result.msg,
                    duration:1500
                })
                return false
            }

            this.AddressIndex()
        },
        add()
        {
            this.$u.route({
                url:'/pages/address/add',
                type:'navigateTo'
            })
        },
        onEdit(id)
        {
            this.$u.route({
                url:'/pages/address/edit',
                type:'navigateTo',
                params:{
                    id
                }
            })
        },
        async onDel(id)
        {
            // console.log(id);
            let data = {
                addrid:id,
            }
            console.log(data);
            let ref =await this.$u.api.user.Del(data)
            console.log(ref);
            if (ref.code ===0) {
                this.$refs.uNotify.show({
                    type:'error',
                    message:ref.msg,
                    duration:1500
                })
            }else{
                this.$refs.uNotify.show({
                    type:'success',
                    message:ref.msg,
                    complete:() => {

                            this.$u.route({
                                url:'/pages/address/address',
                                type:'navigateTo'
                            })
                        }
                })
            }
            

        }
    },
}
</script>
<style>
/* .address-btn {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #4ea9f5;
    border-radius: 0px;
    color: #fff;
} */
/* 列表 */
.list{
    padding-bottom: 46px;
}

.list .item {
    margin: 20rpx 0;
    padding: 30rpx 20rpx;
    box-shadow: 0 0 20px #ccc;
    font-size: 25rpx;
}

.list .header {
    display: flex;
    justify-content: space-between;
}

.list .city {
    margin: 20rpx 0;
}

.btn-box {
    margin-top: 20rpx;
    display: flex;
    justify-content: space-between;
}

.right-btn {
    display: flex;
    align-items: center;
}

.right-btn .edit,
.right-btn .del {
    margin-right: 20rpx;
    display: flex;
}

.right-btn span:first-child {
    width: 35rpx;
    height: 35rpx;
    display: block;
    margin-right: 10rpx;
}

.right-btn span image {
    width: 100%;
    height: 100%;
}

.right-btn .edit span:last-child {
    color: #4ea9f5;
}

.right-btn .del span:last-child {
    color: red;
}

/* 修改单选按钮 */
radio .wx-radio-input {
    width: 35rpx;
    height: 35rpx;
}

radio .wx-radio-input.wx-radio-input-checked {
    width: 35rpx;
    height: 35rpx;
}

radio .wx-radio-input.wx-radio-input-checked::before {
    width: 35rpx;
    height: 35rpx;
    line-height: 35rpx;
    font-size: 30rpx;
}
</style>